<template>
  <div class="home">
    <HeaderNav></HeaderNav>
    <div class="right">
      <div class="summaries">
        <div class="summary">
          <div class="container">
            <!-- 标题及图标区域 -->
            <div class="title-area">
              <div class="icon">
                <div class="icon-inner"></div>
              </div>
              <div class="main-title">流量明细</div>
              <div class="sub-title">查看实时在线</div>
            </div>

            <!-- 数据项 -->
            <div class="data-items">
              <div class="data-item">
                <div class="data-number">15455</div>
                <div class="data-desc">近15分钟在线访客数</div>
              </div>
              <div class="data-item">
                <div class="data-number">5896</div>
                <div class="data-desc">新访客数 (28.14%)</div>
              </div>
              <div class="data-item">
                <div class="data-number">26894</div>
                <div class="data-desc">浏览次数</div>
              </div>
              <div class="data-item">
                <div class="data-number">9559</div>
                <div class="data-desc">老访客数 (51.83%)</div>
              </div>
            </div>
            <!-- 进度条 -->
            <div class="progress-area">
              <div class="progress-bar">
                <div class="progress"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="data-table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th>总汇</th>
                <th>IP数</th>
                <th>浏览量</th>
                <th>访客数</th>
                <th>会话数</th>
                <th>跳出率</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData" :key="index">
                <td>{{ item.title }}</td>
                <td>{{ item.ip }}</td>
                <td>{{ item.pageView }}</td>
                <td>{{ item.visitor }}</td>
                <td>{{ item.session }}</td>
                <td>{{ item.bounceRate }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="summary-to">
        <div class="section">
          <!-- 绘制折线图 -->
          <div id="chart" style="width: 100%; height: 400px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import HeaderNav from '@/views/admin/HeaderNav.vue';
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

// 表格数据
const tableData = ref([
  {
    title: '本月会计',
    ip: '100897546',
    pageView: '19878956',
    visitor: '1789545',
    session: '121312413',
    bounceRate: '36.98%'
  },
  {
    title: '总流量',
    ip: '856858956',
    pageView: '18956456',
    visitor: '1455897',
    session: '121312341',
    bounceRate: '33.57%'
  },
  {
    title: '每日平均',
    ip: '8595564',
    pageView: '5586542',
    visitor: '1785422',
    session: '134234523',
    bounceRate: '33.33%'
  },
  {
    title: '历史巅峰',
    ip: '9875621',
    pageView: '8945554',
    visitor: '1365489',
    session: '174563534',
    bounceRate: '100%'
  },
  {
    title: '巅峰日期',
    ip: '2023-06-05',
    pageView: '2023-06-01',
    visitor: '2023-06-02',
    session: '2023-06-03',
    bounceRate: '2023-06-08'
  }
]);

// 在组件挂载后初始化 ECharts
onMounted(() => {
  const chartDom = document.getElementById('chart');
  const myChart = echarts.init(chartDom);

  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '趋势变化'
    },
    tooltip: {},
    legend: {
      data: ['访问量', '购买量']
    },
    xAxis: {
      data: ["06-01", "06-02", "06-03", "06-04", "06-05", "06-06", "06-07", "06-08", "06-09", "06-10"]
    },
    yAxis: {},
    series: [
      {
        name: '访问量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20, 15, 18, 24, 39]
      },
      {
        name: '购买量',
        type: 'line',
        data: [15, 25, 16, 20, 30, 10, 12, 22, 21, 33]
      }
    ]
  };

  // 使用配置项和数据显示图表
  // setoption：第一个参数是要设置的选项的名称，第二个参数是要设置的值。
  myChart.setOption(option); 
});
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  font-family: 'Arial', sans-serif;
}

.right {
  flex: 1;
  padding: 20px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.summaries {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap; /* 允许子元素换行 */
}

.summary {
  border: 1px solid #e0e0e0;
  padding: 20px;
  width: calc(50% - 20px); /* 减去 margin */
  border-radius: 8px;
  margin-bottom: 20px; /* 添加底部外边距 */
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.summary-to {
  border: 1px solid #e0e0e0;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section {
  margin-bottom: 30px;
  h3 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
  }
}

// 新增的样式
.container {
  display: flex;
  flex-direction: column;
}

.title-area {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.icon {
  width: 40px;
  height: 40px;
  background-color: #007BFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.icon-inner {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
}

.main-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.sub-title {
  font-size: 14px;
  color: #666;
}

.data-items {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.data-item {
  text-align: center;
}

.data-number {
  font-size: 24px;
  font-weight: bold;
  color: #007BFF;
}

.data-desc {
  font-size: 14px;
  color: #666;
}

.progress-area {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #007BFF;
}

.progress {
  height: 100%;
  background-color: #28a745;
  width: 70%; // Example progress
  border-radius: 5px;
}

// 调整图表大小
#chart {
  width: 90%;
  height: 100px;
}

form div {
  margin-bottom: 10px;
}

label {
  margin-right: 10px;
}

input {
  width: 100px;
}

button {
  padding: 5px 10px;
}

// 美化表格样式
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2px;
  border-radius: 5px;
  overflow: hidden;

  th, td {
    text-align: left;
    padding: 6px;
    border-bottom: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
  }

  tr:hover {
    background-color: #f5f5f5;
  }
}
</style>
